<template>
  <div class="home">
    <div class="header">
      <div class="top_bj"></div>
      <div class="top_img">
        <img src="@/assets/img/top.png" alt="">
      </div>
    </div>
    <div class="container">
      <div class="cont_left">
        <!-- 模块1 -->
        <Overview />
        <Maintain />
        <Warning />
      </div>
      <div class="cont_center">
        <div class="center_info">
          <div class="item">
            <img src="@/assets/img/ljjd.png" alt="">
            <div class="item_text">
              <h2>累计节电</h2>
              <h3>{{data.power_saving_elec}}kW.h</h3>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/img/jnbmhn.png" alt="">
            <div class="item_text">
              <h2>节省标煤耗能</h2>
              <h3>{{data.power_saving_coal}}吨</h3>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/img/jdcb.png" alt="">
            <div class="item_text">
              <h2>降低成本</h2>
              <h3>{{data.power_saving_money}}万元</h3>
            </div>
          </div>
        </div>
        <div class="videoBox">
          <div class="iframe_cont">
            <iframe class="pump_map" src="https://www.thingjs.com/s/0c7079a937196fe00619768f" frameborder="0"></iframe>
            <!-- <iframe class="pumpInfo_map" v-show="!assemblyFlg" src="" frameborder="0"></iframe> -->
          </div>
        </div>
        <House />
      </div>
      <div class="cont_right">
        <Loss />
        <Monitor />
        <Consumption />
      </div>
    </div>
  </div>
</template>

<script>

import * as api from '@/assets/utils/api.js'
import Overview from '@/views/Home/overview.vue'
import Maintain from '@/views/Home/maintain.vue'
import Warning from '@/views/Home/warning.vue'
import House from '@/views/Home/house.vue'
import Loss from '@/views/Home/loss.vue'
import Monitor from '@/views/Home/monitor.vue'
import Consumption from '@/views/Home/consumption.vue'

export default {
  name: 'Home',
  components: {
    Overview,
    Maintain,
    Warning,
    House,
    Loss,
    Monitor,
    Consumption
  },
  data() {
    return {
      data: [],
      assemblyFlg: true,
      room_charts: [],
      objId: {},
      clickFlg: 0,
      alertFlg: false
    }
  },
  async created() {
    const result = await api.modeData({ tenantid: 1128 })
    this.data = result.data
    window.addEventListener('message', async(dt) => {
      if (dt.data?.msg == 'get_data') {
        const res = await api.modeData({ tenantid: 1128 })
        document.querySelector('.pump_map').contentWindow.postMessage({ msg: 'set_data', data: res.data }, 'https://www.thingjs.com')
      }
    })
  },
  mounted() {
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.home {
  background-color: #031a44;
  // background: url(@/assets/img/二供大数据展示-节能大屏.png) no-repeat center;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  // opacity: 0.8;
  .header {
    width: 100%;
    height: 0.75rem;
    position: relative;
    z-index: 1;
    background: url(@/assets/img/topTitle.png) no-repeat center;
    background-size: 100% 100%;

    .top_bj {
      width: 100%;
      height: 48%;
      // background: linear-gradient(90deg, #061444 0%, #588FFB 50%, #061446 100%);
      // opacity: 0.1;
    }

    .top_img {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;

      img {
        width: 5.6rem;
        height: 8%;
      }
    }
  }

  .container {
    // width: 100%;
    height: 92%;
    display: flex;
    justify-content: space-between;
    padding: 0 .2rem;
    position: relative;
    top: -20px;

    .cont_left {
      width: 25.5%;
      height: 100%;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .cont_center {
      width: 47%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;

      .return {
        position: absolute;
        right: 2%;
        top: 0;
        display: flex;
        cursor: pointer;
        z-index: 100;

        i {
          font-size: 0.5rem;
          color: #fff;
        }
      }

      .center_info {
        height: 12%;
        padding: 0 .62rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;
        pointer-events: none;

        .item {
          width: 28%;
          display: flex;
          padding-top: .35rem;

          img {
            width: 30%;
            height: 100%;
            // padding: 9px 19px 0 11px;
          }

          .item_text {
            h2 {
              font-size: 0.18rem;
              color: #fff;
              padding: 0.2rem 0 0.05rem 0;
            }

            h3 {
              font-size: 0.25rem;
              font-family: 'arial';
              font-weight: bold;
              color: #46EDE8;
            }
          }

          &:nth-child(1) {
            img {
              padding: 3px 16px 0 8px;
            }
          }

          &:nth-child(2) {
            h3 {
              color: #46A0FF;
            }

            img {
              padding: 4px 19px 0 0;
            }
          }

          &:nth-child(3) {
            img {
              padding: 4px 13px 0 0;
            }

            h3 {
              color: #45FF82;
            }
          }
        }
      }

      .videoBox {
        width: 100%;
        height: 46.9%;

        .iframe_cont {
          width: 100%;
          height: 100%;

          iframe {
            width: 100vw;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            // z-index: 100;
          }
        }
      }

      .house {}
    }

    .cont_right {
      width: 25.5%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}
</style>
